import dayjs from 'dayjs'
import { inject, reactive, ref } from 'vue'
import Configuration from '@/api/client/configuration.js'
import { SAVED_SUCCESSFULLY, SURE_TO_DELETE, SURE_TO_DELETE_THE_ONLY_ONE } from '@/constants/message.js'

export function useSalesPerson(id, formRef) {
  const salesPersonTableColumns = [
    {
      title: 'Name',
      dataIndex: 'personName',
      key: 'name'
    },
    {
      title: 'Revenue Split',
      dataIndex: 'salesRuleStr',
      key: 'commissionPercentage'
    },
    {
      title: 'Takeover Date',
      dataIndex: 'firstProjectDate',
      key: 'takeoverDate',
      customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD')
    },
    {
      title: 'Updated By',
      dataIndex: 'updatedby',
      key: 'updatedBy',
      customRender: ({ text }) => text || '--'
    },
    {
      title: 'Updated On',
      dataIndex: 'updatedon',
      key: 'updatedOn',
      customRender: ({ text }) => (text ? dayjs(text).format('YYYY-MM-DD') : '--')
    },
    {
      title: 'Operate',
      key: 'opt',
      fixed: 'right',
      width: 200
    }
  ]
  const salesTableLoading = ref(true)
  const salesPersonAction = ref('add')
  const showSalesPersonModal = ref(false)
  const salesList = ref([])
  const salesCandidateList = ref([])
  const salesPersonForm = reactive({
    id: undefined,
    personId: null,
    percentage: null,
    date: undefined
  })
  const salesPersonFormRules = {
    personId: [
      {
        type: 'number',
        required: true,
        message: 'Please select',
        trigger: 'blur'
      }
    ],
    percentage: [
      {
        type: 'number',
        required: true,
        message: 'Please input',
        trigger: 'blur'
      }
    ],
    date: [
      {
        required: true,
        message: 'Please select date',
        trigger: 'blur'
      }
    ]
  }
  const handleClickAddSales = () => {
    salesPersonAction.value = 'add'
    salesPersonForm.id = undefined
    salesPersonForm.date = undefined
    salesPersonForm.personId = null
    salesPersonForm.percentage = null
    showSalesPersonModal.value = true
  }
  Configuration.getSalesCandidatesList(id).then(({ data }) => {
    salesCandidateList.value = data
  })
  const loadSalesPersonList = () => {
    Configuration.getSalesList(id).then(({ data }) => {
      salesList.value = data
      salesTableLoading.value = false
    })
  }
  loadSalesPersonList()
  const { message, Modal } = inject('Feedback')
  const handleSaveSalesPerson = () => {
    formRef.value.validate().then(() => {
      salesTableLoading.value = true
      Configuration.saveSalesPerson(id, salesPersonForm)
        .then(() => {
          showSalesPersonModal.value = false
          loadSalesPersonList()
          message.success(SAVED_SUCCESSFULLY)
        })
        .finally(() => {
          salesTableLoading.value = false
        })
    })
  }
  const handleEditSalesPerson = record => {
    salesPersonAction.value = 'edit'
    salesPersonForm.id = record.id
    salesPersonForm.personId = record.personId
    salesPersonForm.percentage = record.salesRule * 100
    salesPersonForm.date = record.firstProjectDate
    showSalesPersonModal.value = true
  }
  const handleDeleteSalesPerson = id => {
    Modal.confirm({
      content: salesList.value.length > 1 ? SURE_TO_DELETE : SURE_TO_DELETE_THE_ONLY_ONE,
      okButtonProps: { danger: true },
      onOk: () => {
        salesTableLoading.value = true
        Configuration.deleteSalesPerson(id)
          .then(() => {
            loadSalesPersonList()
          })
          .finally(() => {
            salesTableLoading.value = false
          })
      }
    })
  }
  return {
    salesPersonTableColumns,
    salesTableLoading,
    salesPersonAction,
    showSalesPersonModal,
    salesList,
    salesCandidateList,
    salesPersonForm,
    salesPersonFormRules,
    handleClickAddSales,
    loadSalesPersonList,
    handleSaveSalesPerson,
    handleEditSalesPerson,
    handleDeleteSalesPerson
  }
}
